<template>
  <div style="padding:50px">
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
      v-loading="dataloading"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
    >
      <template slot="empty">
        <div>
          <span v-if="!dataloading">暂无数据</span>
        </div>
      </template>
      <el-table-column
        :prop="item.field"
        :label="item.label"
        :key="item.field"
        align="center"
        v-for="item in tableHead"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      flag: {
        type: Boolean,
        default: false,
      },
      tableHeadConfig: {
        type: Array,
        default: () => {},
      },
      tableLoadData: {
        type: Array,
        default: () => {},
      },
    },
    data() {
      return {};
    },
    watch: {
      flag(val) {
        this.dataloading = !val;
      },
    },
    computed: {
      tableData() {
        return this.tableLoadData;
      },
      tableHead() {
        return this.tableHeadConfig;
      },
    },

    methods: {},
  };
</script>
<style lang="less" scoped></style>
